<template>
<el-dialog title="选择成分材料" 
        class="product-dialog"
        width="700px"
        append-to-body
        @close="closeEvt"
        :visible.sync="show">
    <PageLayout>
    <template v-slot:header>
        <el-input v-model="query.name" placeholder="输入产品名字查询" size="small"></el-input>
        <el-button @click="queryEvt" type="primary" size="small">查询</el-button>
    </template>
        <el-table
            :data="tableData"
            size="small"
            stripe
            height="100%"
            ref="multipleTable"
            @selection-change="handleSelectionChange"
            style="width: 100%">	
            <el-table-column type="selection" width="55" fixed/>						
            <el-table-column prop="name" label="产品名字" show-overflow-tooltip width="100" fixed="left"/>
            <el-table-column prop="type" label="类型" width="100">
                <template v-slot="data">
                   <div>
                      {{ data.row.type | typeFilter(medicalType)}}
                   </div>
                </template>
            </el-table-column>
            <el-table-column prop="level" label="级别" width="100">
                <template v-slot="level">
                    <div >
                      {{ level.row.level | typeFilter(levelType)}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="brand" label="品牌" width="100"/>
            <el-table-column prop="place" label="产地" show-overflow-tooltip width="150"/>
            <el-table-column prop="price" label="售价" width="100"/>
            <el-table-column prop="remark" label="备注" show-overflow-tooltip width="150"/>
        </el-table>
    <template v-slot:footer>
            <el-pagination
                :page-sizes="[20, 40, 60, 80]"
                :page-size="query.size"
                :current-page="query.page"
                @size-change="sizeChange"
                @current-change="currentChange"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
    </template>
   </PageLayout>
   <template v-slot:footer>
        <el-button size="small" @click="closeEvt" >取 消</el-button>
        <el-button size="small" type="primary" @click="confirmEvt">确 定</el-button>
   </template>
   </el-dialog>
</template>
<script>
import { dictListApi, productListApi } from '@/apis/productApi'
import { set } from 'vue'
export default {
    props:{
        value:{
            type:Boolean,
            required:true
        }
    },
    watch:{
        value(val){
            this.show=val
        }
    },
    data() {
        return {
            show:false,
            tableData:[],
            query:{
                name:'',
                page:1,
                size:20
            },
            total:0,
            timer:null,
            medicalType:[],
            levelType:[],
            selectedRows:[],
            loading:true
        }
    },
    async mounted(){
        let result = await dictListApi('MEDICAL')
        // console.log(result)
        if(result.code === 200){
            this.medicalType = result.data.rows
        }
        let res = await dictListApi('PRODUCT_LEVEL')
        if(res.code === 200){
            this.levelType = res.data.rows
        }
        this.getList()
    },
    // mounted(){
    //     this.getList()
    // },
    methods:{
        confirmEvt(){
            this.$emit('pickDataEvt',this.selectedRows)
            this.$emit('input',false)
        },
        handleSelectionChange(rows){
            if(!this.loading){
                this.tableData.forEach(it=>{
                let idx = this.selectedRows.findIndex(item =>item.id===it.id)
                if(idx>-1) this.selectedRows.splice(idx,1)
            })
                this.selectedRows = this.selectedRows.concat(rows)
            }
        },
        closeEvt(){
            this.$emit('input',false)
        },
        queryEvt(){
            this.query.page = 1
            this.getList()
        },
        async getList(){
            this.loading=true
            let result = await productListApi(this.query)
            if(result.code === 200){
                this.tableData = result.data.rows
                this.total = result.data.count
                setTimeout(()=>{
                    if(!!this.$refs.multipleTable){
                        this.selectedRows.forEach(it=>{
                        let row = this.tableData.find(item=>item.id===it.id)
                        if(!!row) this.$refs.multipleTable.toggleRowSelection(row,true)
                        })
                    }
                    setTimeout(()=>{
                        this.loading=false
                    })
                    
                })
            }
        },
        sizeChange(size){
            this.query.size = size
            this.fd()
        },
        currentChange(page){
            this.query.page = page
            this.fd()
        },
        fd(){
            if(this.timer) clearTimeout(this.timer)
            this.timer = setTimeout(()=>{
                this.getList()
            })
        }
    }
}
</script>